<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
    *{
        box-sizing: border-box;
    }
        div{
            width: 200px;
            margin: 10px auto;
            border:1px solid lightgray;
        }
        ul,li,p,h4{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        h4{
            background-color: lightgray;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        li{
            margin: 10px;
            height: 150px;
            width: 180px;
            position: relative;
            overflow: hidden;
        }
        li>img:nth-of-type(1){
            position: absolute;
        }
        li>img:nth-of-type(2){
            position: absolute;
            left:180px;
            top:0;
        }
        p{
            position: absolute;
            bottom: 0;
            width: 100%;
            font-size: 12px;
            height: 25px;
            padding-left:20px;
            line-height: 25px;
            color: white;
        }
        .red p{
            background-color: #d96160;
        }
        .right p{
            background-color: #134752;
        }
        .right img:nth-of-type(2){
            position: absolute;
            left:-180px;
        }
        .blue p{
            background-color: #2271af;
        }
        p:nth-of-type(1){
            display: none;
        }
    </style>
</head>
<body>
   <div>
       <h4>专辑推荐</h4>
    <ul>
        <li class="left red">
            <img src="images/1_1.jpg" alt="">
            <img src="images/1_2.jpg" alt="">
            <p>几何为网-极致绚烂</p>
            <p>COCOON/可可尼</p>
        </li>
         <li class="right">
            <img src="images/2_1.jpg" alt="">
            <img src="images/2_2.jpg" alt="">
            <p>2013春印象</p>
            <p>INSUN/恩裳</p> 
        </li>
         <li class="left blue">
            <img src="images/3_1.jpg" alt="">
            <img src="images/3_2.jpg" alt="">
            <p>NANMENG/南梦</p>
            <p>JNBY/江南布衣</p>       
        </li>
    </ul>
   </div>
</body>
</html>
<script>
 
    $('li.left').hover(function(){
        $($('img',this)[0]).stop().animate({ left:-180,},1000)
        $($('img',this)[1]).stop().animate({left:0,},1000) 
        $($('p',this)[0]).stop().slideDown(1000)
        $($('p',this)[1]).stop().slideUp(1000) 
       
    },function(){
        $($('img',this)[0]).stop().animate({left:0,},1000)
        $($('img',this)[1]).stop().animate({left:180,},1000)
        $($('p',this)[0]).stop().slideUp(1000)
        $($('p',this)[1]).stop().slideDown(1000)
       
    })
     $('li.right').hover(function(){
        $($('img',this)[0]).stop().animate({ left:180,},1000)
        $($('img',this)[1]).stop().animate({left:0,},1000) 
        $($('p',this)[0]).stop().slideDown(1000)
        $($('p',this)[1]).stop().slideUp(1000) 
     
    },function(){
        $($('img',this)[0]).stop().animate({left:0,},1000)
        $($('img',this)[1]).stop().animate({left:180,},1000)
        $($('p',this)[0]).stop().slideUp(1000)
         $($('p',this)[1]).stop().slideDown(1000)
     
    })
   
</script>